<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style>
        .box {
            padding: 0 50px;
            display: flex;
            flex-direction: column;
        }

        .title {
            width: 100%;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            color: #e6c678;
        }

        .form {
            width: 100%;
            /* flex: 1; */
        }

        .table {
            padding-bottom: 20px;
            flex: 1;
        }

        .table table tr td {
            text-align: center;
        }

        .van-field {
            width: 33.33%;
            float: left;
        }

        .van-cell {
            background-color: transparent;
        }

        .van-field__control {
            border-bottom: 2px solid #e6c678;
        }

        .van-cell::after {
            border-bottom: 0;
        }

        input {
            background: none;
            outline: none;
            border: none;
        }

        .bottomBtns {
            width: 100%;
            display: flex;
        }

        .bottomBtns .van-button {
            margin: auto;
            width: 60%;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="title">加料烘料记录单</div>
            <div class="form">
                <van-field v-model="formData.class" label="班次：" required readonly @click="classShow = true"
                    placeholder="请选择班次">
                </van-field>
                <van-field v-model="formData.StartTime" label="开始加料日期：" readonly></van-field>
                <van-field v-model="formData.EquipmentName" label="料筒：" required readonly placeholder="请选择料筒"
                    @click="openBaseScreen('料筒')"></van-field>
                <van-field v-model="formData.MinTemperature" label="最低标准温度：" readonly placeholder="默认带入">
                </van-field>
                <van-field v-model="formData.MaxTemperature" label="最高标准温度：" readonly placeholder="默认带入">
                </van-field>
                <van-field v-model="formData.CheckTemperature" type="number" label="点检温度：" required
                    placeholder="请输入点检温度" @input="handlerCheckTemperature">
                </van-field>
                <van-field v-model="formData.ResultVal" label="点检结果：" readonly placeholder="默认带入"></van-field>

                <van-field v-model="formData.TotalWeight" label="总重量：" placeholder="默认带入" readonly>
                </van-field>
                <van-field v-model="formData.Colour" label="颜色：" required placeholder="请选择颜色" readonly
                    @click="openBaseScreen('颜色')"></van-field>
                <van-field v-model="formData.empolorName" label="加料人：" placeholder="请输入加料人" readonly></van-field>
                <!-- <van-field v-model="formData.ApproveName" label="审核人：" placeholder="请输入审核人" readonly
                    @click="openBaseScreen('审核人')"></van-field> -->
                <van-field v-model="formData.ApproveName" label="审核人：" placeholder="默认带出审核人" readonly></van-field>
                <van-field v-model="formData.Remarks" label="备注：" placeholder="请输入备注"></van-field>
            </div>

            <div class="table">
                <table>
                    <tr>
                        <th width="8%">操作</th>
                        <th>序号</th>
                        <th>原材料</th>
                        <th>原料批次</th>
                        <th>重量</th>
                    </tr>
                    <tr v-for="(item, index) in tableData">
                        <td>
                            <van-icon size="25" name="delete" color="#ee0a24" @click="deleteTable(index)">
                            </van-icon> &nbsp &nbsp &nbsp
                            <van-icon size="25" v-if="index == tableData.length -1" name="add" size="18" color="#e6c678"
                                @click="addRow"></van-icon>
                        </td>
                        <td>{{index + 1}}</td>
                        <td @click="openBaseScreen('原材料', index)">{{item.ProductName}}</td>
                        <td>
                            <input style="width: 100%;" type="text" v-model="item.MaterialBatch"></input>
                        </td>
                        <td>
                            <input style="width: 100%;" type="text" v-model="item.Weight"
                                @blur="handlerTestingNUM(item, index)"></input>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="bottomBtns">
                <van-button color="linear-gradient(#fffeaa, #c07d39)" type="primary" block @click="submit">
                    保 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 存
                </van-button>
            </div>
        </div>
        <van-action-sheet v-model="classShow" :actions="classOptions" @select="onSelectClass"></van-action-sheet>
        </van-action-sheet>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '料筒') {
                vm.formData.EquipmentID = row.EquipmentID;
                vm.formData.EquipmentName = row.EquipmentName;
            } else if (type == '颜色') {
                vm.formData.Colour = row.InspectionRemark;
            } else if (type == '原材料') {
                vm.tableData[vm.currentIndex].ProductName = row.ProductName;
                vm.tableData[vm.currentIndex].ProductCode = row.ProductCode;

                if (vm.currentIndex == 0) {
                    vm.formData.MinTemperature = row.MinTemperature
                    vm.formData.MaxTemperature = row.MaxTemperature
                }
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                formData: {
                    EquipmentID: '',
                    EquipmentName: '',
                    empolorName: window.localStorage.getItem('loginName'),
                    WhiteORNight: '',
                    class: '',
                    StartTime: APP.getFormatDateTime(new Date()),
                    Result: '',
                    ResultVal: '',
                    Colour: '',
                    CheckTemperature: '',
                    MinTemperature: '',
                    MaxTemperature: '',
                    TotalWeight: '',
                    ApproveName: '',
                    Remarks: ''
                },
                classShow: false,
                classOptions: [
                    {
                        value: '0',
                        name: '白班'
                    },
                    {
                        value: '1',
                        name: '晚班'
                    }
                ],
                tableData: [
                    {
                        ProductName: '',
                        ProductCode: '',
                        MaterialBatch: '',
                        Weight: '',
                    }
                ],
                currentIndex: 0,
            },
            created: function () {
                var that = this;
                console.log('waterAPI', JSON.stringify(api.pageParam))
                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }

                if (window.localStorage.getItem('loginName')) {
                    APP.ajax('getZS_WTAppover', { UserName: window.localStorage.getItem('loginName') }, function (res) {
                        console.log(JSON.stringify(res));
                        if (res.ds.length) {
                            that.formData.ApproveName = res.ds[0].EmplName
                        }
                    })
                }

                that.formData.class = api.pageParam.classOption
                that.formData.WhiteORNight = api.pageParam.classOption == '白班' ? 1 : 0
            },
            mounted() {
                APP.keyBoardChange()
            },
            methods: {
                openBaseScreen(str, index) {
                    var that = this
                    var obj;
                    if (str == '料筒') {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['EquipmentName'],
                            isPaging: false,
                            type: str,
                            cmd: 'getZSMaterialMarrel',
                            param: {
                            }
                        }
                    } else if (str == '颜色') {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['Number'],
                            isPaging: false,
                            type: str,
                            cmd: 'ZS_getColour',
                            param: {
                            }
                        }
                    } else if (str == '原材料') {
                        that.currentIndex = index
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['ProductName', 'ProductCode'],
                            isPaging: false,
                            type: str,
                            cmd: 'ZS_getMaterialList',
                            param: {
                            }
                        }
                    }

                    api.openWin({
                        name: 'baseScreen',
                        url: 'common/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: obj
                    })
                },
                onSelectClass(val) {
                    var that = this
                    that.formData.WhiteORNight = val.value
                    that.formData.class = val.name
                    that.classShow = false
                },
                onSelectTestAgain(val) {
                    var that = this
                    that.formData.TestAgainVal = val.name
                    that.formData.TestAgain = val.value
                    that.showTestAgain = false
                },
                handlerCheckTemperature() {
                    var that = this
                    if (that.formData.CheckTemperature && that.formData.MinTemperature && that.formData.MaxTemperature) {
                        if (Number(that.formData.CheckTemperature) < that.formData.MinTemperature || Number(that.formData.CheckTemperature) > that.formData.MaxTemperature) {
                            that.formData.ResultVal = '不合格'
                            that.formData.Result = 0
                        } else {
                            that.formData.ResultVal = '合格'
                            that.formData.Result = 1
                        }
                    } else {
                        that.formData.ResultVal = ''
                        that.formData.Result = ''
                    }

                },
                handlerTestingNUM(testItem, testIndex) {
                    var that = this
                    var weightArr = []
                    that.tableData.map((item) => {
                        if (item.Weight) {
                            weightArr.push(Number(item.Weight))
                        }
                    })
                    that.formData.TotalWeight = that.sum(weightArr)
                },
                sum(arr) {
                    var s = 0;
                    arr.forEach(function (value) {
                        s += value;
                    });
                    return s;
                },
                deleteTable(index) {
                    var that = this
                    if (that.tableData.length == 1) {
                        that.tableData[0].ProductName = ''
                        that.tableData[0].ProductCode = ''
                    } else {
                        that.tableData.splice(index, 1)
                    }
                    that.handlerTestingNUM()
                },
                addRow() {
                    var that = this
                    var newTable = {
                        ProductName: that.tableData[that.tableData.length - 1].ProductName,
                        ProductCode: that.tableData[that.tableData.length - 1].ProductCode,
                        MaterialBatch: '',
                        Weight: '',
                    }

                    that.tableData.push(newTable)
                },
                submit() {
                    var that = this
                    var mainObj = {
                        EquipmentID: that.formData.EquipmentID,
                        empolorName: that.formData.empolorName,
                        WhiteORNight: that.formData.WhiteORNight,
                        StartTime: that.formData.StartTime,
                        ApproveName: that.formData.ApproveName,
                        Result: that.formData.Result,
                        Colour: that.formData.Colour,
                        CheckTemperature: that.formData.CheckTemperature,
                        MinTemperature: that.formData.MinTemperature,
                        MaxTemperature: that.formData.MaxTemperature,
                        TotalWeight: that.formData.TotalWeight,
                        Remarks: that.formData.Remarks
                    }
                    // console.log('mainObj', JSON.stringify(mainObj))
                    APP.ajax('getZS_AddPlastic', mainObj, function (mainRes) {
                        // console.log('mainRes', JSON.stringify(mainRes))
                        that.tableData.map((item) => {
                            var subObj = {
                                ZS_AddPlasticID: mainRes.ds[0].Column1,
                                ProductName: item.ProductName,
                                MaterialCode: item.ProductCode,
                                Weight: item.Weight,
                                MaterialBatch: item.MaterialBatch
                            }
                            // console.log('subObj', JSON.stringify(subObj))
                            APP.ajax('getZS_AddPlasticDel', subObj, function (res) {
                                // console.log('res', JSON.stringify(res))
                                if (res.ds[0].status != 200) {
                                    api.toast({
                                        msg: '保存失败，请重试！',
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                    return false
                                }
                            })
                        })
                        api.toast({
                            msg: '保存成功！',
                            duration: 2000,
                            location: 'bottom'
                        });
                        api.sendEvent({
                            name: 'refreshBrowser',
                            extra: {
                                clearName: api.pageParam.name
                            }
                        })
                        api.closeFrame()
                    })
                }
            }
        })
    };
</script>

</html>